<template>
	<view class="component-container">
		<no-data v-if="!this.dataList || this.dataList.length == 0" noDatatext="抱歉,没有您想要的商品~"></no-data>
		<!-- 列表 -->
		<view class="zp-list mt30" v-else>
			<view class="zp-list-item" v-for="(item, index) in dataList" :key="index">
				<view class="left">
					<image v-if="item.bigImageUrl" class="big-image" :src="item.bigImageUrl" mode="aspectFill"></image>
					<image v-else class="big-image" src="~@/static/images/noimg.jpg" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="title uni-ellipsis-1">{{ item.title }}</view>
					<view class="subtitle uni-ellipsis-1">{{ item.subtitle }}</view>
					<image v-if="item.status == 1" class="right-status-image" src="~@/static/images/pt.png"
						mode="aspectFill"></image>
					<image v-else class="right-status-image" src="/static/images/yh.png" mode="aspectFill"></image>
					<view class="price">{{ item.price }}</view>
					<view class="button" @click="goToDetail(item)">查看详情</view>
				</view>
			</view>
			<view v-show="isLoadMore">
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	// shared:表示页面 wxss 样式将影响到自定义组件
	options: {
		styleIsolation: 'shared'
	},
	props: {
		// 当前选中内容区域的下标
		activeIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			dataList: [],
			queryParams: {
				pageNum: 1,
				pageSize: 7,
			},
			loadStatus: "loading",
			isLoadMore: false,
		}
	},
	onLoad(options) { },
	onShow() {
		this.dataList = [];
		this.queryParams.pageNum = 1
		this.queryParams.pageSize = 7
		this.getList()
	},
	onReachBottom() {
		if (!this.isLoadMore) {
			this.queryParams.pageNum += 1;
			this.isLoadMore = true;
			this.getList();
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.dataList = [];
		this.queryParams.pageNum = 1
		this.queryParams.pageSize = 7
		this.getList();
		uni.stopPullDownRefresh();
	},
	mounted() {
		this.dataList = [];
		this.queryParams.pageNum = 1
		this.queryParams.pageSize = 7
		this.getList()
	},
	methods: {
		getList() {
			this.dataList = [
				{
					bigImageUrl: "/static/images/car1.jpg",
					status: 1,
					title: "比亚迪海豹",
					subtitle: "科技配置丰富，操控性能出色，适合年轻群体",
					price: "8.38万起"
				},
				{
					bigImageUrl: "/static/images/car2.jpg",
					status: 2,
					title: "这是一个大标题这是一个大标题这是一个大标题这是一个大标题啊",
					subtitle: "这是一个小标题",
					price: "124.39万起"
				},
				{
					bigImageUrl: "/static/images/car1.jpg",
					status: 1,
					title: "比亚迪海豹",
					subtitle: "科技配置丰富，操控性能出色，适合年轻群体",
					price: "8.38万起"
				},
				{
					bigImageUrl: "/static/images/car1.jpg",
					status: 1,
					title: "比亚迪海豹",
					subtitle: "科技配置丰富，操控性能出色，适合年轻群体",
					price: "8.38万起"
				},
				{
					bigImageUrl: "/static/images/car2.jpg",
					status: 2,
					title: "这是一个大标题这是一个大标题这是一个大标题这是一个大标题啊",
					subtitle: "这是一个小标题",
					price: "124.39万起"
				},
				{
					bigImageUrl: "/static/images/car1.jpg",
					status: 1,
					title: "比亚迪海豹",
					subtitle: "科技配置丰富，操控性能出色，适合年轻群体",
					price: "8.38万起"
				},
			]
			// uni.showLoading({ title: "加载中" });
			// list数据，联调时把这里放开
			// let params = {
			//   pageNum: this.queryParams.pageNum,
			//   pageSize: this.queryParams.pageSize,
			// };
			// listUseSeal(params).then((response) => {
			// 	uni.hideLoading();
			// 	this.dataList = [...this.dataList, ...response.rows];
			// 	if (response.rows.length < this.queryParams.pageSize) {
			// 		this.isLoadMore = true;
			// 		this.loadStatus = "nomore";
			// 	} else {
			// 		this.isLoadMore = false;
			// 	}
			// })
			// .catch((err) => {
			// 	console.log(err);
			// });
		},
		goToDetail(item) {
			this.$tab.navigateTo(`/pages/vehicleDetails/index?id=${item.id}`);
		},
	}
}
</script>

<style lang="scss" scoped>
.component-container {
	position: relative;
	display: block;
	padding: 0 24rpx;
}
</style>